<template>
    <div class="block" :style="{ height: blockHeight + 'px' }">
      <div class="block_title" @click="clickBulletFrame">
        <img :src="iconSrc" v-if="showIcon" />
        <span
          :style="{ 
            fontSize: titleStyle.titlefontSize + 'px',
            fontWeight:titleStyle.fontWeight,
            lineHeight:titleStyle.lineHeight + 'px'
            }"
          :class="['title', showIcon ? 'isIcon' : '']"
        >
          {{ title }}
          <slot name="tab"></slot>
        </span>
        <span class="subtitle">{{ subtitle }}</span>
        <ul class="btns" v-if="isListBtns">
          <li
            :class="['btnList', currentIndex == index ? 'active' : '']"
            v-for="(item, index) in textArr"
            :key="index"
            @click.stop="clickchange(index)"
          >{{ item }}</li>
        </ul>
        <div class="box_dashed" :style="{width: `calc(100% - ${dashWidth}px)`}"></div>
        <div
          :style="{ 
            fontSize: titleStyle.morefontSize + 'px',
          }"
          class="more"
          v-if="showMore"
          @click="showMoreFn"
        >更多</div>
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      subtitle: {
        type: String,
        default: ''
      },
      textArr: {
        type: Array,
        default: () => ['社会保险', '住房保险']
      },
      isListBtns: {
        type: Boolean,
        default: true
      },
      showMore: {
        type: Boolean,
        default: false
      },
      blockHeight: {
        type: Number,
        default: 277
      },
      showIcon: {
        type: Boolean,
        default: true
      },
      iconSrc: {
        type: String,
        default: require('@/assets/img/blockBox/icon_title4.png')
      },
      titleStyle: {
        type: Object,
        default: () => {
          return {
            titlefontSize: '18',
            fontWeight: 'normal',
            lineHeight: '33',
            morefontSize: '16'
          }
        }
      },
      dashWidth: {
        type: Number,
        default: 100
      }
    },
    data () {
      return {
        currentIndex: 0
      }
    },
    methods: {
      clickchange (index) {
        this.currentIndex = index
        this.$emit('updateChange', this.currentIndex)
      },
      clickBulletFrame () {
        this.$emit('updateChange2', true)
      },
      showMoreFn () {
        this.$emit('handleShowMore', true)
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .block {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    .block_title {
      position: relative;
      width: 100%;
      height: 33px;
      display: flex;
      position: relative;
  
      img {
        width: 15px;
        height: 13px;
        margin: auto 0;
      }
      .title {
        font-size: 16px;
        font-family: PangMenZhengDao;
        color: #ffbc6c;
        line-height: 19px;
        // margin-top: -8px;
        margin-right: 6px;
        margin-left: 15px;
        span {
          cursor: pointer;
          font-size: 14px;
          // font-family: FZSKJW--GB1-0, FZSKJW--GB1;
          font-family: PangMenZhengDao;
          font-weight: normal;
          // color: #9de2ff;
          color: #fff;
          line-height: 16px;
          &.active {
            font-size: 18px;
            // color: #ffffff;
            color: #ffbc6c;
            line-height: 33px;
          }
        }
        span + span {
          margin-left: 10px;
        }
        &.isIcon {
          margin-left: 6px;
          font-size: 18px;
          font-family: PangMenZhengDao;
          font-weight: normal;
          // color: #ffffff;
          line-height: 28px;
          color: #ffbc6c;
        }
      }
      .subtitle {
        font-size: 14px;
        font-family: DINCond-RegularAlternate;
        font-weight: normal;
        color: #b3daff;
        line-height: 33px;
      }
  
      .box_dashed {
        height: 50%;
        width: calc(100% - 160px);
        border-bottom: 1px dashed #e5e5e5;
      }
  
      .btns {
        display: flex;
        align-items: center;
        height: 16px;
        // margin-right: 22px;
        position: absolute;
        top: 4px;
        right: 15px;
        .btnList {
          height: 26px;
          font-size: 14px;
          font-family: FZSKJW--GB1-0, FZSKJW--GB1;
          font-weight: normal;
          color: #9de2ff;
          line-height: 33px;
          cursor: pointer;
          &.active {
            font-size: 16px;
            color: #ffffff;
            line-height: 33px;
            background: linear-gradient(180deg, #ffffff 0%, #09c8f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          &:not(:last-of-type) {
            margin-right: 14px;
          }
        }
      }
      .more {
        position: absolute;
        right: 22px;
        top: 1px;
        font-family: FZSKJW--GB1-0, FZSKJW--GB1;
        font-weight: normal;
        color: #ffffff;
        line-height: 33px;
        background: linear-gradient(180deg, #ffffff 0%, #09c8f0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        cursor: pointer;
      }
    }
    .content {
      position: relative;
      height: calc(100% - 33px);
    }
  }
  </style>
  